<template>
	<view style="height: 100vh;">
		<!-- <view style="display: flex;justify-content: center;position: flex;top: 0;left: 0;right: 0;z-index: 999;color: black;">
			电子合同
		</view> -->
		<u-navbar title='电子合同' bgColor="transparent" titleStyle="color:#333" :placeholder="true">
			<view class=""  slot="left">
				
			</view>
		</u-navbar>
		<image src="http://qiniuapplet.jiachuangnet.com/pageHeader.png"
			style="width:750rpx;height: 490rpx;z-index:1;position: absolute;top:0;left:0">
		</image>
		<scroll-view style="height: 77%"  scroll-y="true" class="text-wrappper">
			<view style="padding: 25rpx 25rpx;">
				<view class="input_myself"
					style="font-weight: 700;margin: 25rpx 0 50rpx 0;display: flex;justify-content: center;">
					<text>老店升级货架采购协议</text>
				</view>
				<view class="input_myself">
					<text class="lable" style="font-size: 14px;">甲方:</text> <text
						style="text-decoration: underline;text-decoration-color:#c0c4cc;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{firstPartyName}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</text>
				</view>
				<view class="input_myself">
					<text class="lable" style="font-size: 14px;">甲方身份证号:</text> <text
						style="text-decoration: underline;text-decoration-color:#c0c4cc;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{identification}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</text>
				</view>
				<u-parse :content="content1" :tagStyle="style"></u-parse>
				<view style="line-height: 24px;font-size: 14px;" >
					<view style="text-indent:28px">货架采购合同总价为人民币<text style="text-decoration: underline;text-decoration-color:#c0c4cc;">{{totalPaymentText}}</text>整（￥<text style="text-decoration: underline;text-decoration-color:#c0c4cc;">{{totalPayment}}</text>元），合同总价包含乙方完成全部甲方采购项目预算清单费用，包含但不限于货架材料及材料运输、装卸、安装的人工等费用。乙方不得要求甲方支付非经甲方认可的其他费用。</view>
				</view>
				<!-- <p>货架采购合同总价为人民币<u>&nbsp;&nbsp;&nbsp;&nbsp;${convertToRMB(price)}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </u>整（￥<u>&nbsp;&nbsp;${price}&nbsp;&nbsp; </u>元），合同总价包含乙方完成全部甲方采购项目预算清单费用，包含但不限于货架材料及材料运输、装卸、安装的人工等费用。乙方不得要求甲方支付非经甲方认可的其他费用。</p> -->
				<view v-if="type==1">
					<u-parse :content="contentArr1" :tagStyle="style" v-if="contentArr1.length!=0"></u-parse>
					<view style="line-height: 24px;font-size: 14px;" >
						<view style="text-indent:28px">3、货架全部安装完成按实际数量结算，总货架款为：（￥<text style="text-decoration: underline;text-decoration-color:#c0c4cc;">{{totalPayment}}</text> 元），甲方已付：（￥<text style="text-decoration: underline;text-decoration-color:#c0c4cc;">{{paidAmount}}</text> 元），剩余（￥<text style="text-decoration: underline;text-decoration-color:#c0c4cc;">{{remainingAmount}}</text>元 )分四期按月支付，先由丙方通过乐檬零售，每月20号对甲方乐檬账户以划款的方式代收相应款项，再由丙方每月 28日统一将相应货款代付给乙方。各方确认，丙方仅协助甲乙双方代收代付货款，不产生承诺付款或担保的效力，亦不承担任何义务或责任，任意一方不得以此为由要求丙方承担任何义务或责任。</view>
					</view>
					<u-parse :content="contentArr2" :tagStyle="style" v-if="contentArr2.length!=0"></u-parse>
				</view>
				<view v-if="type==2">
					<u-parse :content="contentArr1" :tagStyle="style" v-if="contentArr1.length!=0"></u-parse>
				</view>
				
				<!-- <u-parse :content="content2" :tagStyle="style"></u-parse>
				<u-parse :content="tableText" :tagStyle="tableStyle"></u-parse>
				<u-parse :content="content3" :tagStyle="style"></u-parse> -->
				<view class="input_myself">
					<text class="lable">甲 方：</text>
					<image v-if="signPic" :src="signPic" class="signPic" :mode="scaleToFill"></image>
				</view>
				<view class="input_myself">
					<text>乙 方： 佛 山 市 七 加 壹 加 创 货 架 有 限 公 司</text>
				</view>
				<view class="input_myself">
					<text>丙 方： 湖 南 鸣 鸣 很 忙 商 业 连 锁 有 限 公 司</text>
				</view>
				<!-- <view class="input_myself">
					<text>品牌方：零食很忙 </text>
				</view> -->
				<view class="input_myself" style="margin: 100rpx 0;font-size: 14px;">
					<text style="width: 100%; text-align: end;">签约日期：{{currentTime}} </text>
				</view>
			</view>
		</scroll-view>
		<view class="btn-wrapper" style="display: flex;justify-content: space-around;"
			v-if="!viewContractBtn">
			<view style="width: 80%;">
				<u-button @click="signClick" :disabled="disabled" type="primary" shape="circle">{{textbtn}}{{seconds?'('+seconds+'s)':''}}</u-button>
			</view>
			<!-- <view style="width: 300rpx;">
				<u-button @click="submit" type="primary"  :disabled="disableSub">{{text}}</u-button>
			</view> -->
		</view>
		<view class="btn-wrapper" style="display: flex;justify-content: space-around;" v-else>
			<view style="width: 80%;">
				<u-button @click="viewContract" type="primary" shape="circle">查看</u-button>
			</view>
		</view>
		<u-popup :show="show" @close="show=false" @open="show=true">
			<view class="signtrue" style="padding:20rpx 50rpx;padding-bottom: 100rpx;width: calc(100% - 100rpx);">
				<view style="margin:20rpx 0;color:#c9c9c9;font-size: 24rpx;"><text style="color:red">*</text>请用以正楷字体签名</view>
				<signtrue @getSignImg='getSignImg'></signtrue>
			</view>
		</u-popup>
		<u-loading-page :loading="load"></u-loading-page>
	</view>
</template>

<script>
	import {convertToRMB} from '@/util.js'
	import signtrue from '@/components/signtrue/index.vue'
	import {
		getNowFormatDate,
		dateAddDays
	} from '../../util.js'
	import {
		creatContractFn
	} from './index.js'
	export default {
		components: {
			signtrue
		},
		data() {
			return {
				textbtn:'请仔细阅读后签约',
				disabled: true,
				show: false,
				storeName: '',
				address: '',
				totalPayment: 0,
				currentTime: '',
				contentArr1:'',
				contentArr2:'',
				content1: '',
				content2: '',
				content3: '',
				tableText:'',
				id: 0,
				deliveryDate: null,
				signPic: null,
				style: {
					p: 'font-size:14px;line-height: 24px;margin: 10rpx 0;text-indent:28px',
					u:'text-decoration: underline;text-decoration-color:#c0c4cc;',
					table: 'font-size:14px; box-sizing: border-box; border-top: 1px solid #c0c4cc; border-left: 1px solid #c0c4cc;',
					th: 'border-right: 1px solid #c0c4cc; border-bottom: 1px solid #c0c4cc;',
					td: 'border-right: 1px solid #c0c4cc; border-bottom: 1px solid #c0c4cc;',
					li: 'margin: 5px 0;'
				},
				firstPartyName: '',
				identification: '',
				paidAmount:'',
				remainingAmount:"",
				timer: null,
				seconds: 5,
				pdfSrc:'',
				load: false,
				disableSub: false,
				text: '提交',
				viewContractBtn: false,
				type:0
			}
		},
		onLoad(option) {
			this.timer = setInterval(() => {
				this.seconds = this.seconds - 1
			}, 1000)
			this.type=option.type
			if(this.type==1){
				this.paidAmount = option.paidAmount
				this.remainingAmount=option.remainingAmount
			}
			this.storeName = option.storeName;
			this.address = option.address
			this.identification = option.identification
			this.firstPartyName = option.firstPartyName
			this.getContent()
			this.id = option.id
			this.deliveryDate = option.createdAt.split(' ')[0]
			this.totalPayment = option.totalPayment || 0;
			const {
				text1,
				text2,
				text3,
				tableText
			} = creatContractFn({
				storeName: this.storeName,
				installTime: this.deliveryDate,
				price: this.totalPayment,
			})
			this.currentTime = getNowFormatDate()
			this.content1 = text1
			this.content2 = text2
			this.content3 = text3
			this.tableText=tableText
		},
		watch: {
			seconds: {
				handler(newVal, oldVal) {
					if (newVal == 0) {
						this.disabled = false
						clearInterval(this.timer)
						this.textbtn='签字'
					}
				},
				immediate: true
			}
		},
		computed:{
			totalPaymentText() {
				if(this.totalPayment==0){
					return '零'
				}
				return convertToRMB(this.totalPayment)
			}
			
		},
		methods: {
			getContent(){
				uni.$u.http.get('/contract/getContractTest',{
					params:{
						type:this.type
					}
				}).then(res=>{
					if(res){
						// 分期合同
						if(this.type==1){
							this.contentArr1=res[0]
							this.contentArr2=res[1]
						}
						// 普通合同
						if(this.type==2){
							this.contentArr1=res[0]
						}
					}
				})
			},
			viewContract() {
				uni.showLoading({
					title:'合同下载中...'
				})
				uni.downloadFile({
					url: 'https://' + this.pdfSrc,
					timeout:60000,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.hideLoading();
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					},
					fail:()=>{
						uni.hideLoading();
						uni.$u.toast('合同下载失败,请联系管理员 :)');
					}
				});
			},
			signClick() {
				this.show = true
			},
			submit() {
				if (!uni.$u.test.chinese(this.firstPartyName) || this.firstPartyName.length < 2) {
					return uni.$u.toast('请联系业务员修改您的真实姓名!');
				}
				if (!uni.$u.test.idCard(this.identification)) {
					return uni.$u.toast('请联系业务员修改您的身份证号!');
				}
				if (!this.signPic) {
					return uni.$u.toast('请点击下方签名按钮，进行签字!');
				}
				this.load = true
				this.disabled = true
				this.disableSub = true
				uni.showLoading({
					title:'合同生成中...'
				})
				uni.$u.http.post('/contract/addContract', {
					storeName: this.storeName,
					totalPrice: this.totalPayment,
					customerName: this.firstPartyName,
					type:this.type,
					// deliveryTime: this.deliveryDate,
					remainingAmount:this.remainingAmount,
					paidAmount:this.paidAmount,
					identityCard: this.identification,
					orderId:this.id,
					signName: this.signPic.split(',')[1]
				}).then(res => {
					if (res) {
						uni.hideLoading();
						this.pdfSrc = res;
						uni.$u.toast('签署成功!')
						setTimeout(()=>{
							this.viewContract();
						},1500)
						this.load = false
						this.text = '已提交'
						this.viewContractBtn = true
					} else {
						uni.hideLoading();
						// uni.$u.toast('签署失败，请联系工作人员!')
						this.load = false
						this.disabled = false
						this.disableSub = false
					}
					
				})
			},
			getSignImg(e) {
				this.signPic = e.base64
				this.show = false
				this.submit()
			},
		}
	}
</script>
<style lang="scss" scoped>
	::v-deep.u-navbar__content{
		
	}
	.payment_input{
		display: inline-block;
		width: 200rpx;
	}
	.btn-wrapper{
		position: fixed;
		padding-bottom: 28rpx;
		left: 0;
		right: 0;
		bottom: 16rpx;
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
	}
	.signPic {
		height: 150rpx;
	}
	
	.signtrue {
		width: 100%;
		height: 400rpx;
	}
	
	::v-deep.text-wrappper {
		border-radius: 16rpx;
		background-color: #fff;
		width: 694rpx;
		position: absolute;
		top: 200rpx;
		z-index: 10000;
		left: 28rpx;
		.u-input {
			border-bottom: 1rpx solid #c0c4cc;
			border-radius: unset;
			padding: unset !important;
		}
	
		.u-input__content__field-wrapper__field {
			padding-left: 20px;
			vertical-align: bottom !important;
			font-size: 14px !important;
			line-height: unset !important;
			height: unset !important;
		}
	
		.input_myself {
			display: flex;
			font-size: 14px;
			align-items: center;
			line-height: 28px;
		}
	}
	 
</style>